<template>
  <template v-if="initFieldsLoading">
    <div v-loading.lock="initFieldsLoading" element-loading-text="发布页面生成中..."></div>
  </template>
  <template v-else>
    <div class="content-publish-box" v-loading="submitLoading" element-loading-text="内容发布中...">
      <!-- <div class="publish-header">
        <div class="header-info">
          <span>{{ editId ? '修改' : '发布' }}{{ modelObj ? modelObj.name : '' }}</span>
        </div>
        <div class="header-btn-box">
          <div class="btn-operate">
            <button v-if="!editId" class="header-btn" @click="submitAddPublish(formRef)">
              <i class="iconfont">&#xe6f0;</i>
              <span>发布</span>
            </button>
            <button v-else class="header-btn" @click="submitEdit(formRef)">
              <i class="iconfont">&#xe6d2;</i>
              <span>再次发布</span>
            </button>
          </div>
          <div class="btn-quit">
            <div class="btn-operate">
              <button class="header-btn" @click="quitPublish">
                <i class="iconfont">&#xe882;</i>
                <span>退出</span>
              </button>
            </div>
          </div>
        </div>
      </div> -->
      <el-form id="tinymce-box" label-position="left" :model="fieldsValue" :rules="formRules" ref="formRef">
        <div class="publish-content" ref="publishContentRef" :class="{ 'no-editor': !(fieldsList.editor_class && fieldsList.editor_class.fields.length > 0) }">
          <div class="toolbar"></div>
          <div class="publish-btns-box" ref="publishBtnsBox">
            <el-button-group style="margin-right: 10px">
              <el-button v-if="!editId" class="header-btn" @click="submitAddPublish(formRef)">
                <i class="iconfont" style="margin-right: 3px;">&#xe6f0;</i>
                <span>发布</span>
              </el-button>
              <el-button v-else class="header-btn" @click="submitEdit(formRef)">
                <i class="iconfont" style="margin-right: 3px;">&#xe6d2;</i>
                <span>再次发布</span>
              </el-button>
              <el-popover
                placement="bottom-start"
                width="300px"
                popper-class="header-btn-box-popover"
              >
                <div class="publish-btns-setting">
                  <div class="label">工具栏模式：</div>
                  <el-switch v-model="toolbarMode" active-text="极简模式" inactive-text="标准模式" active-value="1" inactive-value="2" @change="handleSetToolbarMode" />
                </div>
                <template #reference>
                  <el-button class="publish-btns" style="padding: 8px;">
                    <i class="iconfont">&#xe78d;</i>
                  </el-button>
                </template>
              </el-popover>
            </el-button-group>
          </div>
          <!-- 资源展开 -->
          <div class="publish-left-content" v-show="fieldsList.editor_class && fieldsList.editor_class.fields.length > 0">
            <PublishResource :disabled="banResource" @handleUse="insertContent" @handleImportWord="handleImportWord" @handleLayout="handleLayout" @handleCollect="handleCollect" @handleImgEditor="handleImgEditor" v-model:showFilesUpload="showFilesUpload" />
          </div>
          <!-- 内容 -->
          <div class="publish-center-content">
            <el-scrollbar @scroll="handleCenterContentScroll" ref="publishScroll">
              <div class="inner-publish-content" id="basic_msg">
                <div class="editor-thumb" v-if="thumbFields">
                  <RuifoxThumbBasic
                    v-model:value="fieldsValue[thumbFields['field']]"
                    v-model:childrenShow="thumbFields.childrenShow"
                    :title="thumbFields.name"
                    :placeholder="thumbFields.tips"
                    :field="thumbFields.field"
                    :setting="thumbFields.setting"
                  />
                </div>
                <div class="editor-title" v-if="fieldsList.basic_msg.fields && fieldsList.basic_msg.fields.length > 0">
                  <div class="basic-content-item" v-for="item in fieldsList.basic_msg.fields" :key="item.id">
                    <component
                      v-if="item.component !== 'image'"
                      :is="getControl(item)"
                      :title="item.name"
                      v-model:value="fieldsValue[item['field']]"
                      :children="item.children"
                      v-model:childrenShow="item.childrenShow"
                      v-model:fieldsValue="fieldsValue"
                      :modelId="modelId"
                      :editId="editId"
                      :field="item.field"
                      :placeholder="item.tips"
                      :setting="item.setting"
                      @importArticle="handleImportMsg"
                    />
                    <el-collapse-transition>
                      <div v-show="item.children?.length > 0 && item.childrenShow">
                        <div v-for="child in item.children" :key="child.id">
                          <component
                            v-if="child.component !== 'image'"
                            :is="getControl(child)"
                            v-model:value="fieldsValue[child['field']]"
                            v-model:childrenShow="item.childrenShow"
                            :title="child.name"
                            :placeholder="child.tips"
                            :field="child.field"
                            :setting="child.setting"
                          />
                        </div>
                      </div>
                    </el-collapse-transition>
                  </div>
                </div>

                <div class="editor-left-nav-bar" :style="{ top: editorBtnTop + 'px' }">
                  <div class="inner-editor-left-nav-bar">
                    <a v-if="fieldsList.basic_msg.fields && fieldsList.basic_msg.fields.length > 0" href="javascript:;" @click="goAnchor('#basic_msg')">{{ fieldsList.basic_msg.label }}</a>
                    <a v-if="fieldsList.expand_msg.fields && fieldsList.expand_msg.fields.length" href="javascript:;" @click="goAnchor('#expand_msg')">{{ fieldsList.expand_msg.label }}</a>
                    <a v-for="editor in fieldsList.editor_class.fields" :key="editor.id" href="javascript:;" @click="goAnchor('#editor_' + editor.field)">{{ editor.name }}</a>
                    <a class="go-top-btn" href="javascript:;" @click="scrollToTop()">
                      <i class="iconfont">&#xe667;</i>
                    </a>
                  </div>
                </div>
                <!-- <div class="editor-right-btns-box" :style="{ top: editorBtnTop + 'px' }" :class="{ active: true }">
                  <div class="editor-right-btns">
                    <el-tooltip class="box-item" effect="dark" content="从word导入" placement="right">
                      <div class="circle" @click="handleImportWord" v-if="fieldsList.editor_class && fieldsList.editor_class.fields.length > 0">
                        <i class="iconfont">&#xe6f5;</i>
                      </div>
                    </el-tooltip>
                    <el-tooltip class="box-item" effect="dark" content="从网址采集" placement="right">
                      <div class="circle" v-if="fieldsList.editor_class && fieldsList.editor_class.fields.length > 0" @click="handleCollect">
                        <i class="iconfont">&#xe6f6;</i>
                      </div>
                    </el-tooltip>
                    <el-popover placement="right" :width="80" trigger="hover" class="box-item" popper-class="style-popover">
                      <template #reference>
                        <div class="circle" @click="handleLayout('default')">
                          <i class="iconfont">&#xe6f7;</i>
                        </div>
                      </template>
                      <div class="style-choose">
                        <el-button link size="small" style="color: #fff" @click="handleLayout('default')">默认排版</el-button>
                        <el-button link size="small" style="color: #fff; margin: 6px 0 0" @click="handleLayout('more')">更多排版</el-button>
                      </div>
                    </el-popover>
                    <el-tooltip class="box-item" effect="dark" content="安全扫描" placement="right">
                      <div class="circle" @click="handleSafeScan()">
                        <i class="iconfont">&#xe6f8;</i>
                      </div>
                    </el-tooltip>
                  </div>
                </div> -->
              </div>
              <div class="inner-publish-content" id="expand_msg" v-if="fieldsList.expand_msg && fieldsList.expand_msg.fields.length">
                <div class="publish-box-header">
                  <h2>{{ fieldsList.expand_msg.label }}</h2>
                </div>
                <div class="publish-box-content">
                  <div class="publish-filed-item" v-for="item in fieldsList.expand_msg.fields" :key="item.id">
                    <component
                      :is="getControl(item)"
                      :title="item.name"
                      v-model:value="fieldsValue[item['field']]"
                      :children="item.children"
                      v-model:childrenShow="item.childrenShow"
                      v-model:fieldsValue="fieldsValue"
                      :modelId="modelId"
                      :editId="editId"
                      :field="item.field"
                      :placeholder="item.tips"
                      :setting="item.setting"
                    />
                    <el-collapse-transition>
                      <div v-show="item.children?.length > 0 && item.childrenShow">
                        <div v-for="child in item.children" :key="child.id">
                          <component
                            v-if="child.component !== 'image'"
                            :is="getControl(child)"
                            v-model:value="fieldsValue[child['field']]"
                            v-model:childrenShow="item.childrenShow"
                            :title="child.name"
                            :modelId="modelId"
                            :editId="editId"
                            :field="child.field"
                            :placeholder="child.tips"
                            :setting="child.setting"
                          />
                        </div>
                      </div>
                    </el-collapse-transition>
                  </div>
                </div>
              </div>
              <div v-if="fieldsList.editor_class && fieldsList.editor_class.fields.length > 0">
                <div v-for="editor in fieldsList.editor_class.fields" :key="editor.id" class="inner-publish-content" :id="'editor_' + editor.field">
                  <div class="publish-box-header">
                    <div class="publish-box-title">
                      <h2>
                        {{ editor.name }}
                      </h2>
                      <div class="editor-form-item">
                        <el-form-item :prop="editor.field" :rules="editor.required ? [{ trigger: 'blur', required: true, message: '请填写' + editor.name }] : []"></el-form-item>
                      </div>
                    </div>
                    <el-checkbox v-show="fieldsList.editor_class.fields.length > 1" :disabled="editor.editorUse && false" v-model="editor.editorUse" label="启用" size="large" />
                  </div>
                  <el-collapse-transition>
                    <div class="editor-box" v-show="editor.editorUse" v-loading="pasteLoading && currentPastEditor === editor.field" element-loading-text="粘贴内容处理中...">
                      <div class="content-publish">
                        <div class="page-footer-icon page-left-top"></div>
                        <div class="page-footer-icon page-right-top"></div>
                        <Editor
                          v-if="isPasting"
                          :id="editor.field"
                          class="myedit"
                          v-model="fieldsValue[editor['field']]"
                          @blur="handleEditorBlur(editor.field, validNum)"
                          :init="init"
                          tag-name="div"
                        />
                        <div class="page-footer-icon page-left-bottom"></div>
                        <div class="page-footer-icon page-right-bottom"></div>
                        <div id="img-btn-box" v-show="showImgOption" @mouseenter="showImgOption = true" @mouseleave="showImgOption = false">
                          <a href="javascript:;" @click="handleImgEditor('single')">编辑</a>
                        </div>
                      </div>
                    </div>
                  </el-collapse-transition>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <!-- 拓展 -->
          <!-- 拓展 -->
          <div class="publish-expand">
              <div class="col-btn" @click="toggleExpand">
                <i class="iconfont">&#xe645;</i>
              </div>
              <div class="inner-expand-content">
                <div class="inner-expand-content-content" :class="{ 'col-expand': expandState }">
                  <div v-show="expandState">
                    <div class="basic-attribute" v-show="activeExpand=='basicsAttr'">
                      <el-scrollbar style="width: 100%;">
                        <PublishSetting :data="fieldsList.publish_setting.fields" v-model:fieldsValue="fieldsValue" :editId="editId" :modelId="modelId" />
                      </el-scrollbar>
                    </div>

                    <SafeScan
                      v-show="activeExpand=='safeScan'"
                      ref="safeScan"
                      :fieldsValue="fieldsValue"
                      :fieldsMapping="userFieldsMapping"
                      :fieldsFlat="userFieldsFlat"
                      :editor="tinymce"
                      @handleDeleteMark="handleDeleteMark"
                      @handleSetSafeDrawer="handleSetSafeDrawer"
                      @handleIgnore="handleIgnore"
                    ></SafeScan>
                    <div class="tag-setting" v-show="activeExpand=='tagSetting'">
                      <TagMannage v-model="tagList" />
                    </div>
                    <div class="history-setting" v-show="activeExpand=='historySetting'">
                      <HistVersion v-if="activeExpand=='historySetting'" :modelObj="modelObj" @restoreVersion="restoreVersion" />
                    </div>
                  </div>
                </div>
                <el-tabs v-model="activeExpand" tab-position="right" class="expand-tabs" @tab-click="handleExpandTabClick">
                  <el-tab-pane label="发布设置" name="basicsAttr">
                    <template #label>
                      <div class="expand-tabs-label">
                        <i class="iconfont">&#xe78b;</i>
                      </div>
                      <span>发布设置</span>
                    </template>
                  </el-tab-pane>
                  <el-tab-pane label="安全扫描" name="safeScan">
                    <template #label>
                      <div class="expand-tabs-label">
                        <i class="iconfont">&#xe6f8;</i>
                      </div>
                      <span>安全扫描</span>
                    </template>
                  </el-tab-pane>
                  <el-tab-pane label="标签设置" name="tagSetting">
                    <template #label>
                      <div class="expand-tabs-label">
                        <i class="iconfont">&#xe626;</i>
                      </div>
                      <span>标签设置</span>
                    </template>
                  </el-tab-pane>
                  <el-tab-pane label="历史版本" name="historySetting">
                    <template #label>
                      <div class="expand-tabs-label">
                        <i class="iconfont">&#xe617;</i>
                      </div>
                      <span>历史版本</span>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
        </div>
        <FilesUpload v-if="showFilesUpload" v-model:showDialog="showFilesUpload" :isPublic="false" @getFileList="insertFiles" :isToJpg="true"></FilesUpload>

      </el-form>
      <!-- 图片编辑 -->
      <PictureEdit
        v-if="showImgEditor"
        v-model:show="showImgEditor"
        :imgEditorList="imgEditorList"
        :editorImages="editorImages"
        :currentImg="currentImg"
        :isSingleEdit="isSingleEdit"
        :tinymce="tinymce"
      />

      <!-- 一键排版 -->
      <AutoStyle v-model:show="showAutoStyle" :formatList="formatList" :instance="tinymce" :fieldsValue="fieldsValue" @updateList="handleGetFormatList" />
      <!-- 网络采集 -->
      <el-dialog v-model="showCollect" title="网络采集" width="600px">
        <div class="inner-collect">
          <p class="collect-title">请输入要采集的文章地址:</p>
          <el-input v-model="collectParams.targetUrl" size="large" style="margin-bottom: 20px"></el-input>
          <p class="collect-title">目前支持的文章:</p>
          <div class="collect-tips">
            <p>微信公众号，微博文章，知乎专栏，网易新闻，百家号</p>
          </div>
          <el-button type="primary" style="width: 100%; margin-top: 15px" size="large" @click="submitCollect" :loading="collectLoading">采集</el-button>
        </div>
      </el-dialog>
      <!-- word导入 -->
      <el-dialog v-model="showImportWord" width="680px" title="Word导入" :close-on-click-modal="false" :close-on-press-escape="false">
        <div v-loading="importLoading" element-loading-text="内容导入中...">
          <el-upload class="options-item import-word" :show-file-list="false" :http-request="handleUpload" :on-exceed="handleExceed" v-model:file-list="wordUploadList" :limit="1" accept=".docx" drag>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将word文件拖动到此处上传 或者
              <em>点击这里</em>
              ,仅支持docx格式
            </div>
            <template #tip>
              <div class="el-upload__tip" style="margin-top: 10px; font-size: 14px">导入后编辑器将插入word中的内容，不支持的样式或图片可能无法展示，请确认后发布</div>
            </template>
          </el-upload>
        </div>
      </el-dialog>
    </div>
  </template>
</template>

<script setup>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入则不显示编辑器
import { ref, onMounted, reactive, watch, markRaw, computed } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { importContent } from '@/api/content'
import { ElMessage, ElMessageBox } from 'element-plus'
/********java接口*************/
import { insertContentByImport } from '@/api/content'
import { folderResourceCreate, 
  selectById, 
  folderResourceUpdate } from '@/api/folderResource'
import { shareResourceCreate, shareResourceUpdate, selectResourceById } from '@/api/shareResource'

import { getModelDetail } from '@/api/model'
import { getFormatList } from '@/api/layout-template'
import { addCollectTask } from '@/api/collect'
import { createMapping, transBase64FromImage, myDebounce } from '@/utils/tools'
import { createTreeData } from '@ruifox-cms/utils'
/******右侧拓展信息表单拆分******/
import PublishSetting from './components/PublishSetting'
import PublishResource from './components/PublishResource'
import AutoStyle from './components/AutoStyle'
import SafeScan from './components/SafeScan'
import PictureEdit from './components/PictureEdit'
import TagMannage from './components/TagMannage.vue'
/**********动态组件****************/
import RuifoxTextBasic from '@/components/ruifoxComponents/RuifoxTextBasic'
import RuifoxTextareaBasic from '@/components/ruifoxComponents/RuifoxTextareaBasic'
import RuifoxTitleBasic from '@/components/ruifoxComponents/RuifoxTitleBasic'
import RuifoxSelectBasic from '@/components/ruifoxComponents/RuifoxSelectBasic'
import RuifoxDepartBasic from '@/components/ruifoxComponents/RuifoxDepartBasic'
import RuifoxThumbBasic from '@/components/ruifoxComponents/RuifoxThumbBasic'
import RuifoxDateBasic from '@/components/ruifoxComponents/RuifoxDateBasic'
import RuifoxImages from '@/components/ruifoxComponents/RuifoxImages'
import RuifoxVideoBasic from '@/components/ruifoxComponents/RuifoxVideoBasic'
import RuifoxElectronicNewspapers from '@/components/ruifoxComponents/RuifoxElectronicNewspapers'
import RuifoxUploadFilesBasic from '@/components/ruifoxComponents/RuifoxUploadFilesBasic'
import RuifoxSelectMultipleBasic from '@/components/ruifoxComponents/RuifoxSelectMultipleBasic'
import RuifoxCheckboxBasic from '@/components/ruifoxComponents/RuifoxCheckboxBasic'
import RuifoxRadioBasic from '@/components/ruifoxComponents/RuifoxRadioBasic'
import RuifoxNumberBasic from '@/components/ruifoxComponents/RuifoxNumberBasic'
import { createTinyConfig } from './config/tinyConfig' 
import HistVersion from './components/HistVersion.vue'
import { getToken } from '@ruifox-cms/utils'

const token = getToken()
const store = useStore()
const router = useRouter()
const editId = ref(router.currentRoute.value.query.dataId ? router.currentRoute.value.query.dataId : '')
const modelId = ref(router.currentRoute.value.query.modelId) // 模型id
const folderId = ref(router.currentRoute.value.query.folderId) // 文件夹id
const autoSaveKey = 'destroy_form_' + modelId.value
const canAutoSave = ref(!localStorage.getItem(autoSaveKey))
const initFieldsLoading = ref(true) // 表单加载状态
const submitLoading = ref(false) // 发布操作loading
const isPasting = ref(true)
const pasteLoading = ref(false) // 粘贴中

/*************************************************************************页面初始化准备start***************************************************/


// 获取模型详情
const modelObj = ref({})
const positionList = ref([])
const _getModelDetail = async () => {
  const res = await getModelDetail({ id: modelId.value })
  modelObj.value = res.data
  positionList.value = res.data.positions
}

// 表单字段字段处理
const thumbFields = ref({})
const userFields = ref([])
const userFieldsFlat = ref([])
const userFieldsMapping = ref({})
const fieldsValue = ref({}) // 用户填写表单
const fieldsList = ref({}) // 表单字段按位置划分处理
const formRules = ref([]) // 表单校验规则
const formRef = ref() // 表单ref
const getFields = async () => {
  let flatField = await store.dispatch('content/updateFieldList', modelId.value)
  if (flatField) {
    genFormRules(flatField)
    userFields.value = flatField.filter(item => item.isForm)
    userFieldsFlat.value = structuredClone(flatField)
    userFieldsMapping.value = createMapping(flatField, { keyProp: 'field', valueProp: 'name' })
    userFields.value = createTreeData(userFields.value, 'relyFieldId', 'children')
    // 字段信息格式整理
    positionList.value.forEach(item => {
      fieldsList.value[item.value] = {}
      fieldsList.value[item.value].label = item.label
      fieldsList.value[item.value].fields = userFields.value.filter(field => field.setting.fieldPosition === item.value)
      if (item.value === 'editor_class' && fieldsList.value.editor_class.fields[0]) {
        fieldsList.value.editor_class.fields[0].editorUse = true
      }
    })
  }
  let destroyFormValue = localStorage.getItem(autoSaveKey) ? JSON.parse(localStorage.getItem(autoSaveKey)) : undefined
  if (destroyFormValue && destroyFormValue.modelId === modelId.value && !editId.value) {
    ElMessageBox.confirm('<div><p style="font-size: 14px;">您上次有编辑未保存的内容是否恢复内容</p></div>', '提示', {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
      .then(() => {
        fieldsValue.value = JSON.parse(JSON.stringify(destroyFormValue.form))
        canAutoSave.value = true
      })
      .catch(() => {
        canAutoSave.value = true
        localStorage.removeItem(autoSaveKey)
      })
  } else {
    canAutoSave.value = true
  }
  if (fieldsList.value.basic_msg.fields) {
    thumbFields.value = fieldsList.value.basic_msg.fields.find(item => item.component === 'image')
  }
  initFieldsLoading.value = false
}

// 表单以及验证规则生成
const genFormRules = fields => {
  fields.forEach(item => {
    if (item.isRequired) {
      formRules.value[item.field] = [
        {
          required: item.isRequired,
          message: `${item.name}不能为空`,
          trigger: 'change'
        }
      ]
    }
    if (item.isForm && item.defaultValue) {
      fieldsValue.value[item.field] = item.defaultValue
    }
  })
}

// 编辑器验证
const validNum = ref(0)
const handleEditorBlur = field => {
  if (validNum.value > 0) {
    formRef.value.validateField(field)
  }
  validNum.value++
}

// 获取排版格式
const formatList = ref([])
const defaultFormat = computed(() => {
  const defaultData = formatList.value.find(item => item.isDefault)
  return defaultData ? defaultData : formatList.value[0]
})
const handleGetFormatList = async () => {
  const res = await getFormatList()
  if (res.code === 20000) {
    formatList.value = res.data
  }
}
handleGetFormatList()

// 保存图片为base64
const setAvatarBase64 = (src, width, height) => {
  return new Promise(resolve => {
    let image = new Image()
    // 处理缓存
    image.src = src + '?v=' + Math.random()
    // 支持跨域图片
    image.crossOrigin = '*'
    if (width) image.width = width
    if (height) image.height = height
    image.onload = () => {
      let base64 = transBase64FromImage(image)
      resolve(base64)
    }
  })
}
/*************************************************************************页面初始化准备end***************************************************/

/*************************************************************************编辑器工具栏start***************************************************/
// 135编辑器
let editor135
const onContentFrom135 = event => {
  if (typeof event.data !== 'string') {
    if (event.data.ready) {
      editor135.postMessage(tinymce.activeEditor.getContent(), '*')
    }
    return
  }

  if (event.data.indexOf('<') !== 0) return

  tinymce.activeEditor.setContent(event.data)
  fieldsValue.value[tinymce.activeEditor.id] = tinymce.activeEditor.getContent()
  window.removeEventListener('message', onContentFrom135)
}

//图片编辑器
const imgEditorList = ref([])
const showImgEditor = ref(false)
const isSingleEdit = ref(false)
const editorImages = ref([]) //要编辑的图片列表
const currentImg = ref({}) // 当前正在编辑的图片
const curHoverImg = ref({}) // 当前正在编辑的图片
const showImgOption = ref(false)
const moduleClassName = ref('module-img') // 模板图片类名
const handleImgEditor = type => {
  onlineImageEdit() //跳转在线编辑
  let a = 1
  if(a) return

  isSingleEdit.value = type == 'single' ? true : false
  imgEditorList.value = []
  editorImages.value = []
  // 获取所有图片
  let tinyCnt = tinymce.activeEditor.getContent()
  let imgList = []
  if (tinyCnt) {
    imgList = tinymce.activeEditor.dom.select('img')
  }
  if (imgList && imgList.length > 0) {
    showImgEditor.value = true
    if (type != 'single') {
      imgList.forEach((item, index) => {
        let imgObj = {
          id: index,
          url: item.src,
          oldUrl: item.src,
          checked: true, //默认全部勾选
          isModuleImg: item.className == moduleClassName.value ? true : false, //是否是模板图片
          imgSize: {
            width: item.width,
            height: item.height
          },
          oldImgSize: {
            width: item.width,
            height: item.height
          }
        }
        imgEditorList.value.push(JSON.parse(JSON.stringify(imgObj)))
        editorImages.value.push(JSON.parse(JSON.stringify(imgObj)))
      })
    } else {
      //单个编辑
      let curHoverImgObj = {
        id: 0,
        url: curHoverImg.value.src,
        oldUrl: curHoverImg.value.src,
        checked: true,
        isModuleImg: curHoverImg.value.className == moduleClassName.value ? true : false, //是否是模板图片
        imgSize: {
          width: curHoverImg.value.width,
          height: curHoverImg.value.height
        },
        oldImgSize: {
          width: curHoverImg.value.width,
          height: curHoverImg.value.height
        }
      }
      imgEditorList.value = [curHoverImgObj]
      editorImages.value = [curHoverImgObj]
    }

    imgEditorList.value.forEach(item => {
      setAvatarBase64(item.url).then(base64 => {
        item.base64Url = base64
      })
    })
  } else {
    //提示没有图片
    ElMessage({
      message: '稿件内容中没有图片',
      type: 'warning'
    })
  }
}

// 一键排版
const showAutoStyle = ref(false)
const handleLayout = type => {
  if (type === 'more') {
    showAutoStyle.value = true
  } else {
    tinymce.activeEditor.plugins.layout.doAction(defaultFormat.value.rule)
    fieldsValue.value[tinymce.activeEditor.id].replace(/layoutFV/g, '')
    tinymce.activeEditor.dom.$('.layoutFV').removeClass('layoutFV')
  }
}

// 附件上传
const showFilesUpload = ref(false)
const insertFiles = (filesList) => {
  console.log('filesList', filesList)
  let filesContent = ``
  filesList.forEach((item) => {
    if (item.modelId == 1) {
      //图片
      let _file = `<p><img src="${item.url}" origin-src="${item.oriUrl}" /></p>`
      filesContent = filesContent + _file
    } else if (item.modelId == 2) {
      //视频
      let _file = `<p>
          <span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${item.url} data-mce-html="%20">
            <video width="100%" controls="controls">
              <source src=${item.url}>
              你的浏览器不支持HTML5视频
            </video>
          </span>
        </p>`
      filesContent = filesContent + _file
    } else if (item.modelId == 3) {
      //附件
      let _file = `<p><a href="${item.url}">${item.name}</a></p>`
      filesContent = filesContent + _file
    }
  })
  tinymce.activeEditor.insertContent(filesContent + '<p></p>')
}

// 网络采集功能
const showCollect = ref(false)
const collectLoading = ref(false)
const collectParams = reactive({
  detailTemplateId: 1,
  pageNumber: 0,
  pageTemplateId: null,
  targetUrl: '',
  type: 0
})
const handleCollect = () => {
  collectParams.targetUrl = ''
  showCollect.value = true
}
const submitCollect = () => {
  collectLoading.value = true
  addCollectTask(collectParams)
    .then(res => {
      // 填充内容(处理双引号里面还有双引号问题)
      const content = res.data.content.replace(/url\("([^"]+)"\)/g, 'url($1)')
      tinymce.activeEditor.setContent(content)
      fieldsValue.value[tinymce.activeEditor.id] = content
      fieldsValue.value.title = res.data.title.match(/>([^<]+)/)[1]
      ElMessage({
        showClose: true,
        message: '采集成功',
        type: 'success'
      })
      collectLoading.value = false
      showCollect.value = false
    })
    .catch(() => {
      collectLoading.value = false
      showCollect.value = false
    })
}

// 插入样式或模板
const banResource = ref(false) // 禁用标志（发布链接的时候禁用）
const insertContent = (content) => {
  tinymce.activeEditor.insertContent(content + '<p></p>')
  ElMessage({
    showClose: true,
    message: '使用成功',
    type: 'success'
  })
}

// word导入功能
const showImportWord = ref(false)
const importLoading = ref(false)
const wordUploadList = ref([])
// eslint-disable-next-line
const handleImportWord = () => {
  showImportWord.value = true
  wordUploadList.value = []
}
const handleUpload = async (option) => {
  let res = await insertContentByImport({ file: option.file })
  showImportWord.value = false
  tinymce.activeEditor.insertContent(res.data)
}

const handleExceed = () => {
  ElMessage({
    showClose: true,
    message: '只允许上传一个word文件',
    type: 'warning'
  })
}
/*************************************************************************编辑器工具栏end***************************************************/

/*************************************************************************表单中心**********************************************************/
// 基本信息区的控件组件映射
const controlMapBasic = reactive({
  text: markRaw(RuifoxTextBasic),
  textarea: markRaw(RuifoxTextareaBasic),
  title: markRaw(RuifoxTitleBasic),
  select: markRaw(RuifoxSelectBasic),
  depart: markRaw(RuifoxDepartBasic),
  image: markRaw(RuifoxThumbBasic),
  datetime: markRaw(RuifoxDateBasic),
  eNewspaper: markRaw(RuifoxElectronicNewspapers),
  images: markRaw(RuifoxImages),
  video: markRaw(RuifoxVideoBasic),
  uploadFiles: markRaw(RuifoxUploadFilesBasic),
  selectMultiple: markRaw(RuifoxSelectMultipleBasic),
  checkbox: markRaw(RuifoxCheckboxBasic),
  radio: markRaw(RuifoxRadioBasic),
  number: markRaw(RuifoxNumberBasic)
})
const getControl = data => {
  return controlMapBasic[data.component]
}

// 右侧拓展属性
const expandState = ref(false)
const activeExpand = ref('')
const toggleExpand = () => {
  expandState.value = !expandState.value
}

// 导入发布（有相似文章时进行导入）
const handleImportMsg = val => {
  importContent({ model_id: modelId.value, id: val.id }).then(() => {
    // 循环销毁所有编辑器
    if (fieldsList.value.editor_class) {
      fieldsList.value.editor_class.fields.forEach(item => {
        tinymce.editors[item.field].destroy()
      })
    }
    // 告知页面刷新
    setTimeout(() => {
      submitLoading.value = false
      window.opener.updatePage('导入内容成功')
      window.close()
    }, 0)
  })
}
const tagList = ref([])
// 获取内容详情
const _getContentDetail = async () => {
  const query = {
    id: editId.value,
  }
  let res = null
  let creatIdField = router.currentRoute.value.query.creatIdField || 'folderId'
  if (creatIdField == 'shareId') {
    res = await selectResourceById(query)
  } else {
    res = await selectById(query)
  }
  tagList.value = res.data.resourceData?.tagList ? res.data.resourceData.tagList : []
  if (res.code === 20000) {
    Object.assign(fieldsValue.value, res.data.resourceData)
  }
}

// 自动保存内容
const _autoSaveContent = () => {
  // 如果当前不在编辑
  if (!editId.value && canAutoSave.value) {
    localStorage.setItem(
      autoSaveKey,
      (() => {
        let val = {
          form: fieldsValue.value,
          modelId: modelId.value,
        }
        return JSON.stringify(val)
      })()
    )
  }
}
const autoSaveContent = myDebounce(_autoSaveContent, 1500)
watch(
  () => fieldsValue.value,
  () => {
    if (fieldsList.value.editor_class && formRef.value) {
      fieldsList.value.editor_class.fields.forEach(item => {
        formRef.value.validateField(item.field)
      })
    }
    autoSaveContent()
  },
  { deep: true }
)

// 安全扫描
const safeScan = ref(null)
const handleSafeScan = async (isPublish = false, showIgnore = false, showResult = true) => {
  const result = await safeScan.value.handleSafeScan(showIgnore, showResult)
  // 检验是否为发布按钮触发的安全扫描
  if (isPublish && result.isPass) {
    handleRelease()
  }
}

// 安全扫描-父组件抽屉展开
const handleSetSafeDrawer = () => {
  expandState.value = true
  activeExpand.value = 'safeScan'
}

// 安全扫描-忽略事件
const handleIgnore = () => {
  handleRelease()
}

// 安全扫描-删除标记
const handleDeleteMark = () => {
  // 循环编辑器删除标记
  fieldsList.value.editor_class.fields.forEach(item => {
    const $ = tinymce.editors[item.field].dom.$
    // 删除敏感词标记
    $("span[data-foxword='yes']").each(function () {
      $(this).replaceWith($(this).html())
    })
    // 删除外链标记
    $("a[data-foxword='yes']").each(function () {
      $(this).removeClass('scan-words').removeClass('links-span').removeAttr('data-id data-foxword')
    })
    fieldsValue.value[item.field] = tinymce.editors[item.field].getContent()
  })
}

// 表单发布
const submitAddPublish = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 开启发布状态
      handleSafeScan(true, true, false)
    } else {
      // 对每个未填写的字段分别弹出提示
      for (const field in fields) {
        const position = getFieldPosition(field)
        const fieldName = userFieldsMapping.value[field]
        ElMessage({
          showClose: true,
          message: `${position}-${fieldName}不能为空`,
          type: 'warning'
        })
      }
    }
  })
}

const getFieldPosition = field => {
  // 根据field在userFieldsFlat中找到对应的字段信息
  const fieldInfo = userFieldsFlat.value.find(f => f.field === field)
  if (fieldInfo) {
    // 从positionList中获取位置名称
    const position = positionList.value.find(p => p.value === fieldInfo.setting.fieldPosition)
    return position ? position.label : ''
  }
  return ''
}

// 表单提交
const handleRelease = async () => {
  autoGrabThumb()
  const formData = {}
  let creatIdField = router.currentRoute.value.query.creatIdField || 'folderId'
  formData[creatIdField] = folderId.value
  formData.modelId = modelId.value
  formData.resourceData = fieldsValue.value
  formData.resourceData.tagList = tagList.value
  try {
    submitLoading.value = true
    let res
    if (fieldsValue.value.id) {
      formData.id = fieldsValue.value.id
      if (creatIdField == 'shareId') {
        res = await shareResourceUpdate(formData)
      } else {
        res = await folderResourceUpdate(formData)
      }
    } else {
      if (creatIdField == 'shareId') {
        res = await shareResourceCreate(formData)
      } else {
        res = await folderResourceCreate(formData)
      }
    }
    submitLoading.value = false
    if (res.code === 20000) {
      ElMessage.success(fieldsValue.value.id ? '修改成功' : '发布成功')
      // 告知页面刷新
      setTimeout(() => {
        window.opener.updatePage(fieldsValue.value.id ? '修改成功' : '发布成功')
        window.close()
      }, 0)
    }
  } catch (e) {
    submitLoading.value = false
  }
}

// 表单编辑
const submitEdit = async formEl => {
  if (!formEl) return
  formEl.validateField('title', async valid => {
    if (valid) {
      submitLoading.value = true
      autoGrabThumb()
      const formData = {}
      formData.id = editId.value
      formData.resourceId = fieldsValue.value.id
      formData.modelId = modelId.value
      formData.resourceData = fieldsValue.value
      formData.resourceData.tagList = tagList.value

      let creatIdField = router.currentRoute.value.query.creatIdField || 'folderId'
      console.log('creatIdField', creatIdField);
      
      formData[creatIdField] = folderId.value
      let res
      if (creatIdField == 'shareId') {
        res = await shareResourceUpdate(formData)
      } else {
        res = await folderResourceUpdate(formData)
      }
      if (res.code === 20000) {
        submitLoading.value = false
        window.opener.updatePage('修改成功')
        window.close()
      }
    } else {
      ElMessage({
        showClose: true,
        message: '标题不能为空',
        type: 'warning'
      })
    }
  })
}

// 缩略图自动抓取
const autoGrabThumb = () => {
  if (!fieldsValue.value.thumb) {
    const thumbField = userFieldsFlat.value.find(item => item.field === 'thumb')
    if (thumbField) {
      const grabField = thumbField.setting.grabfield
      if (grabField) {
        const grabFieldValue = fieldsValue.value[grabField]
        const imgMatch = grabFieldValue.match(/<img[^>]+src=["']([^"']+)["'][^>]*>/i)
        if (imgMatch && imgMatch[1]) {
          fieldsValue.value.thumb = imgMatch[1]
        }
      }
    }
  }
}

// 工具条上边距控制
const editorBtnTop = ref(0)
const handleCenterContentScroll = val => {
  editorBtnTop.value = val.scrollTop
}

// 导航锚点
const goAnchor = selector => {
  if (document.querySelector(selector)) {
    document.querySelector(selector).scrollIntoView({
      behavior: 'smooth'
    })
  }
}
const publishScroll = ref()
const scrollToTop = () => {
  publishScroll.value.setScrollTop(0)
}

const init = reactive(
  createTinyConfig({
    pasteLoading,
    editor135,
    showImgOption,
    currentImg,
    curHoverImg,
    showFilesUpload,
    isPasting,
    handlers: {
      handleImgEditor,
      setAvatarBase64,
      onContentFrom135
    }
  })
)
// 恢复版本内容
const restoreVersion = (val) => {
  fieldsValue.value[fieldsList.value.editor_class.fields[0].field] = val.content
  fieldsValue.value.title = val.title
  ElMessage.success('恢复成功')
}
/****************其他功能******************/
// 查看历史版本
const handleExpandTabClick = () => {
  expandState.value = true
}
onMounted(async () => {
  await _getModelDetail()
  await getFields()
  if (editId.value) {
    await _getContentDetail()
  }
  handleSetToolbarMode()
})
const publishContentRef = ref()
const publishBtnsBox = ref()
let localToolbarMode = localStorage.getItem('toolbarMode')
const toolbarMode = ref(localToolbarMode ? localToolbarMode : 1) // 1极简模式 2标准模式
// 设置工具栏模式
const handleSetToolbarMode = () => {
  // 1.极简模式 2.标准模式
  if (toolbarMode.value == 1) {
    localStorage.setItem('toolbarMode', 1)
    if (publishContentRef.value) publishContentRef.value.style.paddingTop = '58px'
    if (publishBtnsBox.value) publishBtnsBox.value.style.marginTop = '4px'
    
  } else {
    localStorage.setItem('toolbarMode', 2)
    if (publishContentRef.value) publishContentRef.value.style.paddingTop = '136px'
    if (publishBtnsBox.value) publishBtnsBox.value.style.marginTop = '40px'
  }

  // 2. 销毁当前编辑器
  if (tinymce.activeEditor) {
    tinymce.activeEditor.destroy()
  }

  // 3. 延迟一点时间，重新初始化
  const newConfig = createTinyConfig({
    fatherStore: store,
    pasteLoading,
    editor135,
    showImgOption,
    currentImg,
    curHoverImg,
    showFilesUpload,
    isPasting,
    handlers: {
      handleImgEditor,
      setAvatarBase64,
      onContentFrom135,
    },
  })
  isPasting.value = false
  Object.assign(init, newConfig)
  setTimeout(() => {
    isPasting.value = true
  }, 0)
}
window.addEventListener('beforeunload',() => {
  // 销毁发布
  if (tinymce.activeEditor)
    tinymce.activeEditor.destroy()
  // 正常关闭删除自动保存的内容
  localStorage.removeItem(autoSaveKey)
})

const getImgSize2 = (url) => {
  return new Promise((resolve) => {
    let img = new Image()
    img.src = url
    img.onload = function () {
      resolve({ width: img.width, height: img.height })
    }
  })
}
// 跳转在线编辑
const onlineImageList = ref([])
// eslint-disable-next-line no-unused-vars
const onlineImageEdit = async () => {
  console.log('跳转在线编辑')

  // 获取所有图片
  let tinyCnt = tinymce.activeEditor.getContent()
  let imgList = []
  if (tinyCnt) {
    imgList = tinymce.activeEditor.dom.select('img')
    imgList.forEach((item) => {
      onlineImageList.value.push({
        url: item.src,
        imgId: Date.now() + '_' + Math.ceil(Math.random() * 99999),
      })
    })
  }
  console.log('onlineImageList', onlineImageList.value)
  console.log('curHoverImg', curHoverImg.value)

  let val = onlineImageList.value.find((item) => item.url === curHoverImg.value.src)
  console.log('val', val)

  let res = await getImgSize2(val.url)
  console.log('getImgSize2', res)

  if (process.env.NODE_ENV === 'development') {
    console.log('开发环境', val)

    window.open(
      `http://localhost:3000/#/?token=${token}&uuid=${val.uuid}&fromType=2&imgUrl=${val.url}&width=${res.width}&height=${
        res.height
      }&imgId=${val.imgId}&timestamp=${new Date().getTime()}&method=messageTiny`,
      '_blank'
    )
  } else {
    console.log('生产环境', val)

    window.open(
      `http://banner.foxtest.net/#/?token=${token}&uuid=${val.uuid}&fromType=2&imgUrl=${val.url}&width=${res.width}&height=${
        res.height
      }&imgId=${val.imgId}&timestamp=${new Date().getTime()}&method=messageTiny`,
      '_blank'
    )
  }
}
// 接受图文编辑器传来的信息 测试
function messageTiny(event) {
  if (event.data?.urlList?.length) {
    let curImg = onlineImageList.value.find((item) => item.imgId == event.data.urlList[0].imgId)
    // 获取所有图片
    let tinyCnt = tinymce.activeEditor.getContent()
    let imgList = []
    if (tinyCnt) {
      imgList = tinymce.activeEditor.dom.select('img')
      // 找到原图片进行替换
      imgList.find((item) => {
        if (item.src == curImg.url) {
          item.src = event.data.urlList[0].url
        }
      })
      tinymce.activeEditor && tinymce.activeEditor.uploadImages()
    }
  }
}
window.addEventListener('message', function (event) {
  if (event.data.method === 'messageTiny') {
    messageTiny(event)
  }
})
</script>

<style scoped lang="scss">
.content-publish-box {
  width: 100vw;
  .publish-content {
    position: relative;
    display: flex;
    height: calc(100vh);
    box-sizing: border-box;
    padding-top: 58px;
    background-color: $focusContent;
    overflow: hidden;
    &.no-editor {
      padding-top: 0;
    }
    .publish-btns-box{
      position: absolute;
      right: 20px;
      top: 10px;
      z-index: 11;
      
    }
    .publish-left-content {
      height: 100%;
    }

    .publish-center-content {
      flex: 1;
      height: 100%;

      .inner-publish-content {
        position: relative;
        width: 880px;
        margin: 20px auto 20px;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        padding: 0 40px 40px;

        &#basic_msg {
          display: flex;
          .editor-title {
            flex: 1;
          }
        }

        .publish-box-header {
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #d7d7d7;

          .publish-box-title {
            display: flex;
            align-items: center;
            .editor-form-item {
              width: 200px;
              margin-left: 10px;
            }
          }

          h2 {
            font-size: 18px;
          }
        }

        .editor-box {
          .content-publish {
            position: relative;
            min-height: 500px;
            margin-top: 21px;
            .page-footer-icon {
              height: 20px;
              width: 20px;
              position: absolute;
            }
            .page-left-top {
              left: -21px;
              top: -21px;
              border-right: 1px solid $weightBar;
              border-bottom: 1px solid $weightBar;
            }
            .page-right-top {
              right: -21px;
              top: -21px;
              border-left: 1px solid $weightBar;
              border-bottom: 1px solid $weightBar;
            }
            .page-left-bottom {
              left: -21px;
              bottom: -21px;
              border-right: 1px solid $weightBar;
              border-top: 1px solid $weightBar;
            }
            .page-right-bottom {
              right: -21px;
              bottom: -21px;
              border-left: 1px solid $weightBar;
              border-top: 1px solid $weightBar;
            }
            .myedit {
              outline: none;
              overflow: hidden;
              min-height: 500px;
            }
          }

          #img-btn-box {
            position: absolute;
            top: 0;
            left: 0;
            a {
              text-align: center;
              height: 20px;
              font-size: 12px;
              line-height: 20px;
              background-color: $mainColor;
              border-radius: 4px;
              color: #fff;
              box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
              padding: 5px 10px;
            }
          }
        }

        .editor-left-nav-bar {
          position: absolute;
          top: 0;
          left: -94px;
          width: 80px;
          background-color: $white;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          padding: 10px 0 0;
          border-radius: 4px;
          overflow: hidden;

          .inner-editor-left-nav-bar {
            display: flex;
            flex-direction: column;
            width: 100%;
          }

          a {
            display: block;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            padding: 0 5px;
            @include textEllipsis(28px, 1);

            &.go-top-btn {
              background-color: $mainColor;
              color: #fff;
            }
          }
        }

        .editor-right-btns-box {
          overflow: hidden;
          transition: all 0.4s;
          height: 45px;
          position: absolute;
          top: 0;
          right: -54px;

          .editor-right-btns {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .circle {
              width: 45px;
              height: 45px;
              border-bottom: 1px #fff solid;
              margin-left: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              cursor: pointer;
              font-size: 14px;
              background: $mainColor;
              color: #fff;
              box-sizing: border-box;
              overflow: hidden;

              .el-icon,
              i {
                font-size: 24px;
              }

              &:first-child {
                border-radius: 5px;
              }

              &:last-child {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
              }
            }
          }

          &.active {
            height: calc(5 * 45px);
            .circle {
              &:first-child {
                border-radius: 5px 5px 0 0;
              }
            }
          }
        }
      }
    }

    .publish-expand {
      background-color: $white;
      position: relative;

      height: 100%;
      z-index: 8;

      .col-btn {
        position: absolute;
        height: 120px;
        width: 16px;
        left: -16px;
        top: 50%;
        transform: translateY(-50%);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background-color: $mainColor;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        i {
          color: #fff;
          font-size: 12px;
          transform: rotate(180deg);
        }
      }
      .inner-expand-content {
        box-sizing: border-box;
        height: 100%;
        display: flex;
        .inner-expand-content-content {
          width: 0;
          box-sizing: border-box;
          height: 100%;
          transition: all 0.8s;
          padding-top: 30px;
          &.col-expand {
            width: 368px;
            box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            padding-top: 30px;
            .col-btn i {
              transform: rotate(0deg);
            }
          }
        }

        .expand-tabs {
          height: 100%;
          ::v-deep(.el-tabs__content) {
            padding: 0;
          }
          ::v-deep(.el-tabs__header.is-right) {
            margin-left: 0;
          }
          ::v-deep(.el-tabs__active-bar) {
            display: none;
          }
        }
        .basic-attribute {
          display: flex;
          height: calc(100vh - 280px);
        }
        ::v-deep(.el-tabs__nav) {
          padding-top: 10px;
        }
        ::v-deep(.el-tabs__item) {
          height: initial;
          padding: 0 8px;
          line-height: 28px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 16px;
          .expand-tabs-label {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 36px;
            width: 36px;
            background-color: #f0f2f7;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            font-size: 12px;
            color: #666;
            i {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }
        ::v-deep(.el-form-item__label) {
          width: 80px;
        }
        ::v-deep(.is-active) {
          span.expand-tabs-label.el-tooltip__trigger.el-tooltip__trigger {
            background: #ddd;
            border-radius: 3px;
          }
        }

        .send-setting {
          p {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 54px;
            border-bottom: 1px solid #c4c9d5;
            font-size: 14px;
            color: #606266;
          }
          li.send-item {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            border-bottom: 1px solid #e4e4e4;
            span {
              color: #606266;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
.window-enter-to,
.window-leave-from {
  max-width: 370px;
}
.window-enter-active,
.window-leave-active {
  transition: all 0.8s;
}
.window-enter-from,
.window-leave-to {
  max-width: 0;
}
.inner-collect {
  .collect-title {
    margin-bottom: 10px;
  }
  .collect-tips {
    font-size: 14px;
    color: #aaaaaa;
  }
}
.dump-outer-box {
  .check-box {
    height: 200px;
  }
  .dump-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .copy-urls {
      margin-top: 15px;
      p {
        @include textEllipsis(24px, 1);
      }
      .inner-copy-urls.enable-url {
        color: $successColor;
      }
      .inner-copy-urls.fail-url {
        color: $failColor;
      }
      .inner-copy-urls {
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
        }
        p {
          flex: 1;
        }
        .icon-box {
          margin-left: 5px;
          width: 18px;
          display: flex;
          align-items: center;
          i {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.header-btn-box-popover{
  .publish-btns-setting{
    display: flex;
    align-items: center;
    .label{
      font-size: 14px;
    }
  }
}
.publish-content {
  .toolbar {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 0.4s;
    box-shadow: 0 0 10px rgba(#000, 0.1);
    z-index: 11;
    .tox-menubar,
    .tox-toolbar {
      background-image: none;
    }
    .tox-editor-header {
      border: none;
      margin: 0;
    }
    .tox-toolbar {
      flex-direction: column;
      justify-content: center;
      .tox-tbtn--bespoke {
        border: 1px solid $borderColor;
        .tox-tbtn__select-label {
          width: 6em;
        }
      }
      .tox-tbtn {
        height: auto;
        min-height: 34px;
        .image-group {
          padding: 7px 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          i {
            font-size: 40px;
          }
        }
        .image-group.link-group {
          i {
            font-size: 30px;
            margin: 5px 0;
          }
        }
      }
      .tox-tbtn--bespoke:not(:last-of-type) {
        margin-right: 10px;
      }
      .tox-toolbar__group:not(:last-of-type) {
        border-right: none;
      }
      .tox-toolbar__group {
        padding: 0 8px;
      }
    }
    .tox-toolbar:not(:last-of-type) {
      border-right: 1px solid $borderColor;
    }
    .tox-menubar{
      display: flex;
      justify-content: center;
    }
    .tox-toolbar-overlord {
      display: flex;
      justify-content: center;
      padding-bottom: 10px;
    }
  }
}
.tag-setting {
  padding: 20px;
}
.history-setting {
  padding: 20px 0;
}
@media screen and (max-width: 1280px) {
  .tox-toolbar-overlord {
    display: flex;
    justify-content: flex-start !important;
    padding: 10px 0;
    overflow: auto;
  }
}
</style>
<style>
.el-popover.style-popover {
  padding: 5px;
  min-width: 80px;
  background: #303133;
}
.el-popover.style-popover .style-choose {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-popover.style-popover .el-popper__arrow::before {
  background: #303133;
}

</style>
